---
layout: base
---

<div class="fill">
  <header>
    <nav class="page-centered">
      <div class="dropdown">
        <a class="vl-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
        <div class="dropdown-content">
          <a href="https://vega.github.io/vega/">Vega</a>
          <a href="https://altair-viz.github.io/">Altair</a>
          <a href="https://vega.github.io/vega-lite-api/">Vega-Lite API</a>
        </div>
      </div>
      <div class="vl-links">
        <div class="primary-links">
          <a href="{{ site.baseurl }}/examples/" {% if page.menu == 'examples' %}aria-current="page"{% endif %}>Examples</a>
          <a href="{{ site.baseurl }}/tutorials/getting_started.html" {% if page.menu == 'tutorials' %}aria-current="page"{% endif %}>Tutorials</a>
          <a href="{{ site.baseurl }}/docs/" {% if page.menu == 'docs' %}aria-current="page"{% endif %}>Documentation</a>
          <a href="{{ site.baseurl }}/usage/embed.html" {% if page.menu == 'usage' %}aria-current="page"{% endif %}>Usage</a>
          <a href="{{ site.baseurl }}/ecosystem.html" {% if page.menu == 'ecosystem' %}aria-current="page"{% endif %}>Ecosystem</a>
        </div>
        <div class="secondary-links">
          <a href="https://www.github.com/vega/vega-lite">GitHub</a>
          <a href="https://vega.github.io/editor/#/custom/vega-lite">Try Online</a>
        </div>
      </div>
    </nav>
  </header>
  <section{% if page.menu %} class="{{ page.menu }}"{% endif %}>
    {{ content }}
  </section>
</div>

<footer>
  <div class="page-centered">
   <span class="edit-page">
      <a href="https://github.com/vega/vega-lite/edit/next/site/{% if page.edit_path %}{{ page.edit_path }}{% else %}{{ page.path }}{% endif %}">Edit this page</a> and submit a pull request!
    </span>

    <a href="http://idl.cs.washington.edu" title="UW Interactive Data Lab" class="idl-logo"><img src="{{ site.baseurl }}/static/idl-logo.png"/></a>
  </div>
</footer>
